<template>
    <div class="container">
      <a-card  v-for="item in data" :key="item.id"  hoverable style="width:200px">
        <img
          style="height:270px"
          :alt="item.movie_title"
          :src="item.movie_img"
          slot="cover"
        />
        <a-card-meta :title="item.movie_title" style="background:skyblue">
          <span slot="description">类型:{{item.movie_type}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span slot="description">城市:{{item.movie_city}}</span><br>
          <p slot="description">更新时间:{{item.movie_update}}</p>
        </a-card-meta>
      </a-card>
    </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const res = await $axios.get("http://localhost:3333/?page=1&size=20");
    return {
      data: res.data
    };
  }
};
</script>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}

.ant-card-meta-description span{
  color: purple;
}
.ant-card-meta-description p{
  color: pink;
}
.ant-card{
  display: inline-block;
}

</style>